<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="./Script/10.练习.js"></script>
  </head>
  <body>
    <div class="outer">
      <form action="#">
        <div class="form-head">
          <!-- 头部文字,告诉内容 -->
          选择你的爱好
          <input type="checkbox" name="head-input" id="checkbox-All" />全选
        </div>
        <div class="form-input">
          <input type="checkbox" name="hobby" value="兵乒球" />兵乒球
          <input type="checkbox" name="hobby" value="羽毛球" />羽毛球
          <input type="checkbox" name="hobby" value="足球" />足球
          <input type="checkbox" name="hobby" value="篮球" />篮球
        </div>
        <div class="form-btn">
          <button id="All">全选</button>
          <button id="Del">取消</button>
          <button id="reverse">反选</button>
          <button id="send">提交</button>
        </div>
      </form>
    </div>
  </body>
</html>
